<template>
  <div class="main-wrapper">

    <Banner :carousel="carousel" v-if="carousel.length > 0"/>

    <el-tabs v-model="activeName1" class="tabs-list" type="card" @tab-click="handleClick1">
      <el-tab-pane v-for="item in tablist" :key="item.code" :label="item.title" :name="item.code">
      </el-tab-pane>
    </el-tabs>

    <el-tabs v-model="activeName2" class="tabs-list" type="card" @tab-click="handleClick2">
      <el-tab-pane v-for="item in secondTabList[activeName1]" :key="item.code" :label="item.title" :name="item.code">
      </el-tab-pane>
    </el-tabs>

    <div class="list">
      <MyList :list="listMap[activeName1 + activeName2]" v-if="listMap[activeName1 + activeName2] && listMap[activeName1 + activeName2].length>0"
              @handleClick="handleClickList"/>
      <div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner.vue";
import MyList from "@/components/ListData.vue";
import {getBanner, getCatList, getHomePageList} from "../config/service";

export default {
  name: "Home",
  data() {
    return {
      carousel: [],
      activeName1: "",
      activeName2: "",
      tablist: [],
      secondTabList: [],
      listMap: {},
      imagesList:["","",""]
    };
  },
  components: {
    Banner, MyList
  },
  created() {
    this.getBannerFn();
    this.getCatListFn();
  },
  methods: {
    handleClick1() {
      if(this.secondTabList[this.activeName1].length > 0){
        this.activeName2 = this.secondTabList[this.activeName1][0].code
        this.getHomePageListFn(this.activeName2)
      }else {
        this.activeName2 = "-1"
        this.getHomePageListFn(this.activeName1)
      }
    },
    handleClick2() {
      this.getHomePageListFn(this.activeName2)
    },
    handleClickList(item) {
      console.log(item.url);
      const {clickAction, clickHref} = item;
      switch (clickAction) {
        case 1:
          window.open(clickHref, "_blank");
          break;
        case 3:
          // 模板跳转
          // const domainUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "")
          // window.open(domainUrl + clickHref, "_blank");
          break;
      }
    },
    async getHomePageListFn(tabval) {
      const result = await getHomePageList(tabval);
      if (!result) return;
      this.listMap[this.activeName1 + this.activeName2] = result.homeDataList;

    },
    async getBannerFn() {
      const result = await getBanner()
      if (result) this.carousel = result.bannerList
    },
    async getCatListFn() {
      const result = await getCatList()
      console.log(result)
      if (result) this.tablist = result.categoryList || []
      if (this.tablist.length === 0) return;
      this.activeName1 = this.tablist[0].code
      this.tablist.forEach((item) => {
        this.secondTabList[item.code] = item.categoryList
        if(item.code === this.activeName1 && item.categoryList && item.categoryList.length > 0){
          this.activeName2 = item.categoryList[0].code
        }
        item.categoryList.forEach((ii) => {
          this.listMap[item.code + ii.code] = []
        })
      })
      console.log(this.activeName2, this.activeName1)
      this.getHomePageListFn(this.activeName2 || this.activeName1)
    }
  }
};
</script>

<style scoped>
.tabs-list {
  margin: 20px 0;
}

.main-wrapper {
  width: 1226px;
  margin: 0 auto;
}

.el-tabs__content {
  background-color: #f5f5f5;
}
</style>
